﻿/*
Copyright (c) Microsoft Corporation. All rights reserved
*/

/* styles */
#rootGrid {
    display: -ms-grid;
    -ms-grid-columns: minmax(230px, 2fr) 8fr;
    -ms-grid-rows: 115px 1fr auto 120px;
    width: 100%;
    height: 100%;
}

    #rootGrid #header {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        background-color: rgb(20, 0, 68);
        padding: 15px 0px 0px 30px;
    }

        #rootGrid #header #featureLabel {
            padding-top: 10px;
            overflow: hidden;
            width: 100%;
        }

    #rootGrid #scenarioPane {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        background-color: rgb(20, 0, 68);
        padding: 0;
    }

    #rootGrid #content {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
        -ms-grid-row-span: 4;
        position: relative;
        overflow-y: auto;
        padding: 80px 42px 10px 42px;
    }

    #rootGrid #statusBox {
        -ms-grid-column: 1;
        -ms-grid-row: 3;
        background-color: rgb(20, 0, 68);
        max-height: 200px;
        overflow: hidden;
    }

    #rootGrid #footer {
        -ms-grid-column: 1;
        -ms-grid-row: 4;
        background-color: rgb(20, 0, 68);
        padding: 25px 10px;
    }

#header {
    white-space: nowrap;
    overflow:hidden;
}

    #header img {
        vertical-align: middle;
    }

#footer span {
    font-size: 12px;
}

#footer .links {
    color: rgb(153,153,153);
}

    #footer .links a {
        color: rgb(153,153,153);
        font-size: 12px;
        text-decoration: none;
    }

    #footer .links .pipe {
        font-size: 9px;
    }

#contentHost {
    height: 100%;
}

#statusMessage {
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
}

#sampleHeader, #featureLabel {
    font: 20pt/24pt "Segoe UI";
    font-weight: 300;
    white-space: normal;
}

#scenarioDescription {
    font: 11pt/15pt "Segoe UI";
    font-weight: 300;
}

#scenarioView {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#scenarioContent {
    overflow: auto;
    flex-shrink: 1;
}